<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #4a6fa5;
        }

        .intro {
            flex: 1;
        }

        .intro h1 {
            color: #4a6fa5;
            margin-bottom: 10px;
        }

        .photo-container {
            margin-left: 20px;
        }

        .photo {
            width: 150px;
            height: 200px;
            object-fit: cover;
            border-radius: 5px;
            border: 3px solid #e0e0e0;
        }

        .sound-icon {
            color: #4a6fa5;
            font-size: 24px;
            cursor: pointer;
            margin-top: 10px;
            display: inline-block;
            transition: color 0.3s;
        }

        .sound-icon:hover {
            color: #2d4373;
        }

        section {
            margin-bottom: 30px;
        }

        h2 {
            color: #4a6fa5;
            margin-bottom: 15px;
            padding-bottom: 5px;
            border-bottom: 1px solid #e0e0e0;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }

        input, select, textarea {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }

        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: #4a6fa5;
            box-shadow: 0 0 5px rgba(74, 111, 165, 0.3);
        }

        .required {
            color: #d32f2f;
        }

        button {
            background-color: #4a6fa5;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #2d4373;
        }

        @media (max-width: 600px) {
            header {
                flex-direction: column;
                text-align: center;
            }

            .photo-container {
                margin-left: 0;
                margin-top: 20px;
            }

            .photo {
                width: 120px;
                height: 160px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="intro">
                <h1 id="greeting">你好，我是[你的名字]。</h1>
                <p id="introduction">我是[你的班级]的学生。</p>
                <div class="sound-icon" id="soundIcon">🔊 点击朗读</div>
            </div>
            <div class="photo-container">
                <img src="photo.jpg" alt="个人照片" class="photo" onerror="this.style.display='none'">
            </div>
        </header>

        <section>
            <h2>个人信息</h2>
            <form id="infoForm">
                <div class="form-group">
                    <label for="name">姓名 <span class="required">*</span></label>
                    <input type="text" id="name" required>
                </div>

                <div class="form-group">
                    <label for="class">班级 <span class="required">*</span></label>
                    <input type="text" id="class" required>
                </div>

                <div class="form-group">
                    <label for="studentId">学号 <span class="required">*</span></label>
                    <input type="text" id="studentId" required>
                </div>

                <div class="form-group">
                    <label for="school">学校/院系</label>
                    <input type="text" id="school">
                </div>

                <div class="form-group">
                    <label for="region">国家/地区</label>
                    <input type="text" id="region">
                </div>

                <div class="form-group">
                    <label for="languages">语言</label>
                    <input type="text" id="languages" placeholder="例如：中文、英语">
                </div>

                <div class="form-group">
                    <label for="hobbies">爱好</label>
                    <input type="text" id="hobbies" placeholder="例如：阅读、运动">
                </div>

                <div class="form-group">
                    <label for="about">关于我</label>
                    <textarea id="about" rows="3" placeholder="简单介绍一下自己"></textarea>
                </div>

                <button type="submit">提交</button>
            </form>
        </section>
    </div>

    <script>
        // 语音朗读功能
        document.getElementById('soundIcon').addEventListener('click', function() {
            const greeting = document.getElementById('greeting').textContent;
            const introduction = document.getElementById('introduction').textContent;
            const textToSpeak = greeting + ' ' + introduction;

            // 使用Web Speech API
            const speech = new SpeechSynthesisUtterance();
            speech.text = textToSpeak;
            speech.lang = 'zh-CN'; // 设置中文语音
            speech.rate = 1; // 语速
            speech.pitch = 1; // 音调
            window.speechSynthesis.speak(speech);
        });

        // 表单提交处理
        document.getElementById('infoForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const formData = {
                name: document.getElementById('name').value,
                class: document.getElementById('class').value,
                studentId: document.getElementById('studentId').value,
                school: document.getElementById('school').value,
                region: document.getElementById('region').value,
                languages: document.getElementById('languages').value,
                hobbies: document.getElementById('hobbies').value,
                about: document.getElementById('about').value
            };

            // 可以在这里添加数据处理逻辑，例如发送到服务器或本地存储
            console.log('表单数据:', formData);
            
            // 显示提交成功信息
            alert('信息提交成功！');
        });

        // 页面加载时尝试加载照片，如果不存在则隐藏
        window.addEventListener('load', function() {
            const photo = document.querySelector('.photo');
            photo.addEventListener('error', function() {
                this.style.display = 'none';
            });
        });
    </script>
</body>
</html>